<template>
	<view class="login_wrap">
		<!-- mixin.js 中的 navBack()，不能少了括号，不然会传递event对象 -->
		<text class="iconfont icon-close close" @click="navBack()"></text>

		<view class="login_center">
			<view class="logo">LOGIN</view>
			<view class="welcome">欢迎回来!</view>
			<form @submit="login">
				<view class="form-item column">
					<view class="title">手机号码</view>
					<input class="input" type="number" maxlength="11" v-model="formData.mobile" placeholder="请输入手机号码" />
				</view>
				<view class="form-item column">
					<view class="title">验证码</view>
					<input class="input" type="number" maxlength="6" v-model="formData.code" placeholder="请输入手机验证码" />
					<!-- <button @click="sendCode">获取验证码</button> -->
					<l-code :mobile="formData.mobile"></l-code>
				</view>
				<view class="form-btn">
					<button form-type="submit" :loading="loading" class="submit">登录</button>
				</view>
			</form>
		</view>

		<!-- QQ weixin -->
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<view class="other-wrapper">
			<view class="line center">
				<text class="tit">社交账号登录</text>
			</view>
			<view class="row">
				<image @click="toProviderLogin('weixin')" class="icon" src="/static/share/weixin.png"></image>
				<!-- #ifdef APP-PLUS -->
				<image @click="toProviderLogin('qq')" class="icon" src="/static/share/qq.png"></image>
				<!-- #endif -->
			</view>
		</view>
		<!-- #endif -->


		<view class="login_bottom">
			<radio-group @change="changChecked">
				<label class="radio">
					<radio :checked="checked" />
					<text>请认真阅并同意</text>
					<text class="user">《用户服务协议》</text>
					<text class="user">《隐私权协议》</text>
				</label>
			</radio-group>
		</view>

	</view>
</template>

<script>
	import {
		AuthModel
	} from "@/common/apis/auth.js"
	let authModel = new AuthModel()

	export default {
		data() {
			return {
				formData: {
					code: "",
					mobile: ""
				},
				checked: true,
				loading: false
			};
		},
		methods: {
			// 发送验证码
			/* async sendCode() {
				console.log(111111);
				if (!this.formData.mobile || !this.$util.checkStr(this.formData.mobile, 'mobile')) {
					this.$util.msg('请输入有效手机号码')
					return
				}

				const {
					code
				} = await authModel.sendCode(this.formData.code);
				if (code == 20000) {
					console.log(111);
				}
			}, */

			// 改变单选框状态
			changChecked(e) {
				this.checked = !this.checked
			},

			// 登录
			async login(event) {
				if (!this.formData.mobile || !this.$util.checkStr(this.formData.mobile, 'mobile')) {
					this.$util.msg('请输入有效手机号码')
					return
				}
				if (!this.formData.code || !this.$util.checkStr(this.formData.code, 'mobileCode')) {
					this.$util.msg('验证码输入错误')
					return
				}
				if (!this.checked) {
					this.$util.msg('请阅读并同意用户服务及隐私协议')
					return
				}
				this.loading = true
				uni.showLoading({
					title: '登录中···',
					mask: true
				})
				const {
					data: {
						code,
						message,
						data
					}
				} = await authModel.login(this.formData)
				this.loading = false
				uni.hideLoading()
				if (code !== 20000) {
					this.$util.msg(message)
					return
				}
				this.loginUpdateStore(data)
				// uni.setStorageSync('userInfo', userInfo)

				// this.$util.msg('登录成功')
				// setTimeout(() => {
				// 	uni.switchTab({
				// 		url: '/pages/my/my'
				// 	})
				// }, 1000)
				// this.navTo('pages/my/my.vue')

			},

			// 登录成功, 更新store登录状态
			loginUpdateStore(data) {
				this.$util.msg('登录成功')
				this.$store.commit('setToken', data)
				setTimeout(() => {
					this.navBack()
				}, 500)
			},

			// 关闭页面
			/* close() {
				uni.reLaunch({
					url: '/pages/my/my' 
				})
			} */

			// 第三方登录
			toProviderLogin(type) {
				if (!this.checked) {
					this.$util.msg('请阅读并同意用户服务及隐私协议')
					return
				}
				uni.showLoading({
					mask: true
				})
				// 进入授权页
				uni.login({
					provider: type,
					success: (res) => {
						const data = {
							userInfo: res.authResult
						}
						console.log(data);
						this.getServiceUserInfo(data)
					}
				})
			},
			// 将得到的数据发送给后台
			async getServiceUserInfo(reqData) {
				let res = await authModel.loginByProvider(reqData);
				uni.hideLoading()
				if (data.userInfo.mobile && data.access_token) {
					this.loginUpdateStore()
				} else {
					this.$util.msg('授权成功, 请绑定手机号')
					console.log('天杂胡');
					this.navTo('/pages/auth/bind-mobile?data=' + JSON.stringify(data))
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.login_wrap {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 60rpx;

		.iconfont {
			position: absolute;
			top: 40rpx;
			left: 40rpx;
			font-size: 40rpx;
		}

		.close {
			z-index: 9999;
		}
	}

	.login_center {
		position: absolute;
		top: 14%;
		color: #555;
		width: 84%;

		.logo {
			font-size: 120rpx;
			color: #ebebeb;
		}

		.welcome {
			position: absolute;
			top: 70rpx;
			font-size: 46rpx;
			// margin-bottom: 100rpx;
		}

		.form-item {
			position: relative;
			width: 100%;
			margin-right: 30rpx;
			padding: 16rpx 30rpx;
			background-color: #f8f6fc;
			margin-top: 40rpx;
			border-radius: 8rpx;

			.title {
				font-size: 26rpx;
				margin-bottom: 20rpx;
				color: #606266;
			}

			.input {
				font-size: 30rpx;
			}

			// button {
			// 	position: absolute;
			// 	bottom: 0;
			// 	right: 0;
			// 	background-color: #345dc2;
			// 	border-radius: 5px;
			// 	width: 80px;
			// 	font-size: 24rpx;
			// 	color: #fff
			// }

		}

		.form-btn {
			margin-top: 60rpx;

			.submit {
				background-color: #345dc2;
				color: #fff;
			}
		}

	}

	.login_bottom {
		position: absolute;
		left: 80rpx;
		bottom: 30rpx;
		width: 100%;
		font-size: 24rpx;
		color: #999;

		radio {
			transform: scale(.7);
		}

		.user {
			color: #40a2ff
		}
	}

	// QQ weixin
	.other-wrapper {
		position: absolute;
		bottom: 260rpx;
		width: 86%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20rpx;
		margin-top: 80rpx;

		.weixin {
			border: 0;
		}

		.line {
			margin-bottom: 40rpx;

			.tit {
				margin: 0 32rpx;
				font-size: 24rpx;
				color: #606266;
			}

			&:before,
			&:after {
				content: '';
				width: 160rpx;
				height: 0;
				border-top: 1px solid #e0e0e0;
			}
		}

		.icon {
			width: 80rpx;
			height: 80rpx;
			margin: 0 50rpx
		}
	}
</style>
